<template>
  <div>
    <div class="box">
      <div>
        <h2>基本信息</h2>
        <hr class="line">
        <Row>
          <Col span="2">
          <h3>优惠券ID：</h3></Col>
          <Col span="10" class="text_left">
          <p>{{ID}}</p></Col>
          <Col span="2">
          <h3>当前状态：</h3></Col>
          <Col span="10" class="text_left">
          <p>{{formValidate.publishStatus}}</p></Col>
        </Row>
        <Row>
          <Col span="2">
          <h3>优惠方式：</h3></Col>
          <Col span="10" class="text_left">
          <p>{{formValidate.discountType}}</p></Col>
        <!--  <Col span="2">
          <h3>审核状态：</h3></Col>
          <Col span="10" class="text_left">
          <p>未审核</p></Col>-->

            <Col span="2">
            <h3>有效期：</h3></Col>
            <Col span="10" class="text_left">
            <p>{{formValidate.expiryDate}}天</p></Col>

        </Row>
        <Row>
          <Col span="2">
          <h3>使用范围：</h3></Col>
          <Col span="10" class="text_left">
          <p>{{formValidate.usableRange}}</p></Col>
          <Col span="2">
          <h3>优惠券类型：</h3></Col>
          <Col span="10" class="text_left">
          <p>{{formValidate.type}}</p></Col>
        </Row>
        <Row>
          <Col span="2">
          <h3>优惠券描述：</h3></Col>
          <Col span="10" class="text_left">
          <p>{{formValidate.description}}</p></Col>
          <Col span="2">
          <h3>上架时间：</h3></Col>
          <Col span="10" class="text_left">
          <p>{{formValidate.beginDate}}</p></Col>
        </Row>
        <Row>
          <Col span="2">
          <h3>优惠券标题：</h3></Col>
          <Col span="10" class="text_left">
          <p>{{formValidate.title}}</p></Col>
          <Col span="2">
          <h3>下架时间：</h3></Col>
          <Col span="10" class="text_left">
          <p>{{formValidate.endDate}}</p></Col>
        </Row>

      </div>

      <div>
        <h2>累积数据</h2>
        <hr class="line">
        <Row class="dataNum">
          <Col span="3">
          <dl>
            <dd><b>{{formValidate.totalSurplus}}</b></dd>
            <dd><p>优惠券剩余</p></dd>
          </dl>
          </Col>

          <Col span="3">
          <dl>
            <dd><b>{{formValidate.totalAcquired }}</b></dd>
            <dd><p>已领取</p></dd>
          </dl>
          </Col>

          <Col span="3">
          <dl>
            <dd><b>{{formValidate.totalExpired }}</b></dd>
            <dd><p>已过期</p></dd>
          </dl>
          </Col>

          <Col span="3">
          <dl>
            <dd><b>{{formValidate.totalPendingUse }}</b></dd>
            <dd><p>待使用</p></dd>
          </dl>
          </Col>

          <Col span="3">
          <dl>
            <dd><b>{{formValidate.totalUsed}}</b></dd>
            <dd><p>已使用</p></dd>
          </dl>
          </Col>
          <Col span="4">
          <dl>
            <dd><b>$</b><b>{{formValidate.totalDerateAmount }}</b></dd>
            <dd><p>优惠券减免金额</p></dd>
          </dl>
          </Col>
          <Col span="4">
          <dl>
            <dd><b>$</b><b>{{formValidate.totalUseCouponOrderAmount}}</b></dd>
            <dd><p>使用优惠券订单金额</p></dd>
          </dl>
          </Col>

        </Row>
      </div>

      <div>
        <h2>历史数据</h2>
        <hr class="line">

        <Form :model="formItem" :label-width="80">
          <Row>
            <Col span="5">
            <FormItem label="开始日期">
              <DatePicker type="date" :options="pickerBeginDateBefore" v-model="formItem.start" @on-change="geTimestart"></DatePicker>
            </FormItem>
            </Col>
            <Col span="5">
            <FormItem label="结束日期">
              <DatePicker type="date"  :options="pickerBeginDateAfter" v-model="formItem.end" @on-change="geTimend"></DatePicker>
            </FormItem>
            </Col>
            <Col span="2" offset="1">
            <Button type="primary"  @click="historySelect">查询</Button>
            </Col>

            <Col span="2">
            <Button type="primary" @click="exportData">导出</Button>
            </Col>

          </Row>
        </Form>

        <Table border :columns="columns" :data="datas" ref="coupon_table"></Table>

        <!--<Page :total="pageTotal"
              pageSize="30"
              size="small"
              @on-change="pageChange"
              show-elevator
              show-total>
        </Page>-->
      </div>
    </div>
  </div>

</template>

<script>
  import * as validate from '../../lib/validate'
  import * as fuc from '../../lib/lib'
  import * as Url from '../../api/url'
  import axios from 'axios'
  import { CouponApi, Header } from '../../api/api'
  export default {
    data () {
      return {
        ID: this.$route.query.id,
        columns: [
          {title: '日期', key: 'dayStr', width: 120},
          {title: '优惠券剩余', key: 'daySurplus'},
          {title: '当日新增', key: 'dayIncreased'},
          {title: '当日过期', key: 'dayExpired'},
          {title: '当日使用', key: 'dayUsed'},
          {title: '当日减免金额', key: 'dayDerateAmount',},
          {title: '当日使用优惠券订单金额', key: 'dayUseCouponOrderAmount'}
        ],
        datas: [],
        pageTotal: '',    //总页数
        pageNum: '',       //当前分页
        formItem: {
          start: '',      //开始时间
          end: ''        //结束
        },
        formValidate: {
          description: '',    //优惠券描述
          title: '',       //优惠券标题
          targetUser: '',        //投放用户
          type: '',        //优惠券类型
          userfiel: '',
          couponAssignType: '',//优惠券发放类型 1.用户领取 2.自动发放 ,
          couponCodeType: '',//优惠码类型 1.一人一码 2.多人一码
          stock: '',//优惠券库存
          discountType: '',//优惠方式 1.折扣 2.现金优惠 3.满减 ,
          discountPercent: '',// 折扣率(仅当 discountType=1 时有效) ,
          discountCash: '',// 现金折扣金额(仅当 discountType=2 时有效) ,
          moneyOffPurchase: '',// 参与满减优惠需要购买的金额数(仅当 discountType=3 时有效) ,
          moneyOffDiscount: '',// 满减优惠，购买指定金额之后的折扣金额(仅当 discountType=3 时有效) ,
          usableRange: '',// 优惠券使用范围 1.全场通用 2.指定套餐 3.指定设备 ,
          usableRangeByCombo: '',// 优惠券可使用的套餐范围(仅当 usableRange=2 时有效) ,
          usableRangeByDevice: '',// 优惠券可使用的设备范围(仅当 usableRange=3 时有效) ,
          beginDate: '',    //上架时间
          endDate: '',     //下架时间
          expiryDate: '',//有效期  默认40
          publishStatus: '',//上架状态,
          onDate: '',
          offDate: '',
          totalSurplus: '0',//优惠券总剩余数量 ,
          totalAcquired: '0',// 优惠券总已领取数量 ,
          totalExpired: '0',// 优惠券总已过期数量 ,
          totalPendingUse: '0',// 优惠券总待使用数量 ,
          totalUsed: '0',// 优惠券总已使用数量 ,
          totalDerateAmount: '0',// 优惠券总减免金额 ,
          totalUseCouponOrderAmount: '0',// 使用优惠券订单金额
        },

        pickerBeginDateBefore: {
          disabledDate (date) {
            return date.getTime() > Date.now();
          }
        },
        pickerBeginDateAfter: {
          disabledDate: (date) => {
            let beginDateVal = this.formItem.start;
            if (beginDateVal) {
              return date.getTime() < beginDateVal;
            }
          },
        }
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.pageFromXqing();

      })
    },
    computed: {
      start(){
        //return fuc.dateFormatYMD(this.formValidate.beginDate)
      },
      end(){
        return fuc.dateFormatYMD(this.formValidate.endDate)
      }
    },
    methods: {
      geTimestart(date){
        this.formItem.start=date;
      },
      geTimend(date){
        this.formItem.end=date;
      },
      historySelect(){
        if(this.formItem.start !="NaN-NaN-NaN" && this.formItem.start !="" ){
          this.formItem.start =fuc.dateFormatYMD(this.formItem.start);
          if(this.formItem.start=="1970-01-01"){
            this.formItem.start =null;
          }
        }else {
          this.formItem.start =null;
        }
        if(this.formItem.end !="NaN-NaN-NaN" && this.formItem.end !="" ){
          this.formItem.end =fuc.dateFormatYMD(this.formItem.end);
          if(this.formItem.end=="1970-01-01"){
            this.formItem.end =null;
          }
        }else {
          this.formItem.end =null;
        }
        let data={
          beginDate:this.formItem.start,
          endDate:this.formItem.end
        }
        axios.get(Url.couponDetail+this.ID,{params:data}).then(response=>{
          this.datas=[];
          let result = response.data;
          if(response.data.messageCode=="200"){
            if(result!=undefined && result.data !=undefined){
              if(result.data.length>0){
                this.datas= response.data.data;
                //this.pageTotal = this.datas.length;
              }
            }
          }
        }).catch(error=>{
        })
      },
      pageFromXqing(){
        //console.log('详情:' + this.ID)
        axios.post(Url.coupons + this.ID).then(response => {
          let result = response.data.data;
         // console.log(result);
          if(result != undefined){
            this.formValidate.description = result.description   //优惠券描述
            this.formValidate.title = result.title     //优惠券标题
            this.formValidate.targetUser = result.targetUser        //投放用户
            this.formValidate.type = result.type        //优惠券类型
            this.formValidate.couponAssignType = result.couponAssignType//优惠券发放类型 1.用户领取 2.自动发放 ,
            this.formValidate.couponCodeType = result.couponCodeType//优惠码类型 1.一人一码 2.多人一码
            this.formValidate.stock = result.stock//优惠券库存
            this.formValidate.discountType = result.discountType//优惠方式 1.折扣 2.现金优惠 3.满减 ,
            this.formValidate.discountPercent = result.discountPercent// 折扣率(仅当 discountType=1 时有效) ,
            this.formValidate.discountCash = result.discountCash// 现金折扣金额(仅当 discountType=2 时有效) ,
            this.formValidate.moneyOffPurchase = result.moneyOffPurchase// 参与满减优惠需要购买的金额数(仅当 discountType=3 时有效) ,
            this.formValidate.moneyOffDiscount = result.moneyOffDiscount// 满减优惠，购买指定金额之后的折扣金额(仅当 discountType=3 时有效) ,
            this.formValidate.usableRange = result.usableRange// 优惠券使用范围 1.全场通用 2.指定套餐 3.指定设备 ,
            this.formValidate.usableRangeByCombo = result.usableRangeByCombo// 优惠券可使用的套餐范围(仅当 usableRange=2 时有效) ,
            this.formValidate.usableRangeByDevice = result.usableRangeByDevice// 优惠券可使用的设备范围(仅当 usableRange=3 时有效) ,
            this.formValidate.beginDate = result.beginDate    //上架时间
            this.formValidate.endDate =result.endDate   //下架时间
            this.formValidate.expiryDate = result.expiryDate//有效期  默认40
            this.formValidate.publishStatus = result.publishStatus//上架状态

            this.formValidate.totalSurplus = result.totalSurplus != null ? result.totalSurplus : 0//优惠券总剩余数量 ,
            this.formValidate.totalAcquired = result.totalAcquired != null ? result.totalAcquired : 0// 优惠券总已领取数量 ,
            this.formValidate.totalExpired = result.totalExpired != null ? result.totalExpired : 0// 优惠券总已过期数量 ,
            this.formValidate.totalPendingUse = result.totalPendingUse != null ? result.totalPendingUse : 0// 优惠券总待使用数量 ,
            this.formValidate.totalUsed = result.totalUsed != null ? result.totalUsed : 0// 优惠券总已使用数量 ,
            this.formValidate.totalDerateAmount = result.totalDerateAmount != null ? result.totalDerateAmount : 0// 优惠券总减免金额 ,
            this.formValidate.totalUseCouponOrderAmount = result.totalUseCouponOrderAmount != null ? result.totalUseCouponOrderAmount : 0// 使用优惠券订单金额

            this.formItem.start = this.formValidate.beginDate;
            this.formItem.end =fuc.dateFormatYMD(new Date()) ;
            //console.log(this.formItem.start+":"+this.formItem.end)
            this.historySelect();
            switch (this.formValidate.publishStatus) {
              case 0:
                this.formValidate.publishStatus = '未上架'
                break
              case 1:
                this.formValidate.publishStatus = '已上架'
                break
              default:
                this.formValidate.publishStatus = '已下架'
                break
            }
            switch (this.formValidate.type) {
              case 1:
                this.formValidate.type = '优惠券'
                break
              case 2:
                this.formValidate.type = '优惠码'
                break;
            }
            switch (this.formValidate.discountType) {
              case 1:
                this.formValidate.discountType = '折扣'
                break
              case 2:
                this.formValidate.discountType = '现金优惠'
                break;
              case 3:
                this.formValidate.discountType = '满减'
                break;
            }
            switch (this.formValidate.usableRange) {
              case 1:
                this.formValidate.usableRange = '全场通用'
                break
              case 2:
                this.formValidate.usableRange = '指定套餐'
                break;
              case 3:
                this.formValidate.usableRange = '指定产品'
                break;
            }
          }


        }).catch(error => {
        })
      },
      exportData(){
        this.$refs.coupon_table.exportCsv({
          filename: '优惠券数据'
        })
      }

    },
    components: {}
  }
</script>

<style scoped>
  .box {
    padding: 10px;
  }

  h2, h3 {
    color: #5e5e5e;
  }

  .ivu-input[disabled], fieldset[disabled] .ivu-input {
    background-color: #f3f3f3;
    opacity: 1;
    cursor: not-allowed;
    color: #6b6b6b;
  }

  .ivu-page {
    margin-top: 10px;
  }

  .ivu-row {
    margin-bottom: 5px;
  }

  .line {
    margin-bottom: 10px;
  }

  .text_left {
    text-align: left;
    font-size: 14px;
  }

  .dataNum dl dd {
    display: block;
    text-align: center;
  }

  .dataNum dl dd b {
    font-size: 30px;
  }

  .dataNum dl dd p {
    font-size: 14px;
    font-weight: 100;
  }

  .dataNum dl:hover {
    color: #ff942a;
    cursor: pointer
  }
</style>
